<template>
  <div>
    <a-card style="border-radius:0px!important;">
      <!--      <a-avatar-->
      <!--        :size="64"-->
      <!--        src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png!avatar200"-->
      <!--      >-->
      <!--      </a-avatar>-->
      <span style="margin-left: 30px; margin-top:0px; font-size: 18px"
      >&nbsp; 广西落久水利枢纽工程 </span>

    </a-card>
    <!-- 列表 -->
    <pro-table
      ref="tableRef"
      :fetch="fetch"
      :columns="columns"
      :toolbar="toolbar"
      :operate="operate"
      :param="state.param"
      :pagination="pagination"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
    >
    </pro-table>
    <upload :visible="state.visibleUpload" @close="closeUpload"></upload>
    <detail :visible="state.visibleDetail" @close="closeDetail" :record="state.recordData"></detail>

    <page-footer></page-footer>
  </div>
</template>
<script>
import upload from "@/view/qianqi/modal/upload";
import detail from "@/view/qianqi/modal/detail";
import {reactive, ref} from "vue";
import {page} from "@/api/module/oss";
export default {
  components: {
    upload,detail
  },
  setup() {
    const tableRef = ref()

    /// 文本
    const converFormat = [{label:"本地", value:"local"},{label:"阿里云", value:"aliyun"}];

    /// 预览
    const imageFormat = {width: 34}

    /// 列配置
    const columns = [
      { dataIndex: "name", key: "name", title: "文件名称" },
      { dataIndex: "path", key: "path", title: "预览", image: imageFormat},
      { dataIndex: "createTime", key: "createTime", title: "创建时间" },
      { dataIndex: "remark", key: "remark", title: "备注" },
    ];

/// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      var data=[{
        "createBy": "1",
        "createTime": "2021-05-09 19:54:41",
        "updateBy": "1",
        "updateTime": "2021-05-09 19:54:41",
        "deleted": false,
        "remark": null,
        "id": "1391360974042927105",
        "name": "法人验收",
        "location": "aliyun",
        "bucket": "pear-admin",
        "suffix": ".png",
        "size": 55,
        "path": "http://pear-admin.oss-cn-beijing.aliyuncs.com/2988a049-4510-4111-a5be-3d56869bfc40.png"
      },
      {
        "createBy": "1",
        "createTime": "2021-05-09 01:23:54",
        "updateBy": "1",
        "updateTime": "2021-05-09 01:23:54",
        "deleted": false,
        "remark": null,
        "id": "1391081434771021825",
        "name": "专项验收",
        "location": "aliyun",
        "bucket": "pear-admin",
        "suffix": ".png",
        "size": 55,
        "path": "http://pear-admin.oss-cn-beijing.aliyuncs.com/a4a63f92-3b44-4537-a174-07773c48ed48.png"
      },
      {
        "createBy": "1",
        "createTime": "2021-05-09 01:23:44",
        "updateBy": "1",
        "updateTime": "2021-05-09 01:23:44",
        "deleted": false,
        "remark": null,
        "id": "1391081392542769153",
        "name": "阶段验收",
        "location": "aliyun",
        "bucket": "pear-admin",
        "suffix": ".png",
        "size": 55,
        "path": "http://pear-admin.oss-cn-beijing.aliyuncs.com/45623130-401a-4a3f-a6fc-db0a507cd7d3.png"
      }];
      console.log(response.data.record);
      return {
        total: response.data.total,
        data: data,
      };
    };

    /// 工具栏
    const toolbar = [
      { label: "上传" , event: function () { state.visibleUpload = true }},
    ];

    /// 行操作
    const operate = [
      { label: "查看", event: function (record) { state.visibleDetail = true, state.recordData = record}},
    ];

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      param: {},
      selectedRowKeys: [],
      visibleUpload: false,
      visibleDetail: false,
      recordData: {}
    })

    /// 查询参数
    const searchParam = [
      { key: "name", type: "input", label: "名称"},
      { key: "code", type: "input", label: "描述"},
      { key: "state", type: "select", label: "状态", value: "0",
        hidden: true ,
        options: [
          { text: "全部", value: "0"},
          { text: "开启", value: "1"},
          { text: "关闭", value: "2"}
        ]
      }
    ]

    const search = function(value) {
      state.param = value
      tableRef.value.reload()
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeUpload = function(){
      state.visibleUpload = false
      tableRef.value.reload()
    }

    const closeDetail = function(){
      state.visibleDetail = false
      tableRef.value.reload()
    }
    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      tableRef,
      pagination,
      searchParam,
      closeUpload,
      closeDetail,
      onSelectChange,
    };
  }
};
</script>
<style>
.ant-list-item-meta-description {
  line-height: 28px;
}
</style>
